<template>
	<div>
		<Grid :col="1" :border="false" padding="5px" v-auth:depart:view:add-one>
			<GridItem><Button icon="md-add-circle" type="primary" @click="drawer = true;this.title = '新增一级部门'">新增一级部门</Button></GridItem>
		</Grid>
		
		 <!-- 引入表格 -->
		 <Table border :columns="columns" :data="data" :loading="loading" row-key="1">
			
			<template #action="{ row, index }">
				<Button type="default" icon="ios-search" size="small" style="margin-right: 5px"
                v-auth:depart:view:query-user
                :disabled="!row.status" @click="searchWin = true; departId = row.id">查看人员</Button>
				<Button type="success" icon="md-add-circle" size="small" style="margin-right: 5px"
                v-auth:depart:view:add-child
                :disabled="!row.status" @click="addDepart(row, '添加子部门')">添加子部门</Button>
				<Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px"
                v-auth:depart:view:modify
                @click="modifyDepart(row)">修改</Button>
				
				<Button type="error" icon="ios-remove-circle-outline" v-auth:depart:view:remove
                 size="small" @click="remove(row)">移除</Button>
			</template>
			
			<template #status="{ row, index }">
				<DotTag type="primary" v-if="row.status">正常</DotTag>
				<DotTag type="error" v-else>失效</DotTag>
			</template>

       <template #footer>
         <VanPagination v-model="page" :items-per-page="pageSize"
                        :total-items="total" @page-click="showData"
                        :show-page-size="5" force-ellipses />
       </template>

		 </Table>
		
		<Drawer
			:title="title"
			v-model="drawer" v-if="drawer"
      @on-close="closeWin"
			width="720"
			:mask-closable="false"
			:styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
			
			<!-- 引入菜单表单组件 -->
			<DepartForm
          :row="departRow"
          @close-win="closeWin"></DepartForm>
		</Drawer>


    <Modal v-model="searchWin" title="查看人员信息" v-if="searchWin" :width="1200">

      <UserTable ref="permission" :depart-id="departId"></UserTable>

      <template #footer>
        <Button type="default" @click="this.searchWin = false">关闭</Button>
      </template>
    </Modal>


  </div>
</template>
<script>
import DepartForm from '../components/DepartForm.vue'
import DotTag from '../components/DotTag.vue'
import VanPagination from "../components/VanPagination.vue"
import UserTable from '../components/UserTable.vue'
export default {
  data () {
      return {
        page: 1,
        pageSize: 10,
        total: 100,
        departRow: {},
        loading: false,
        drawer: false,
        title: '',
        departId: null ,
        searchWin: false,
        columns: [
               {title: '序号', key: 'id', width: 100},
               {title: '部门名', key: 'name', tree: true},
               {title: '部门编号',key: 'code', width: 180},
               {title: '状态',key: 'status', slot: 'status', width: 100},
               {title: '录入时间',key: 'createTime', width: 200},
               {title: '操作',slot: 'action',align: 'center'}
        ],
        data: [],
      }
  },
  created() {
     this.showData();  // 查询数据的部门信息
  },
  methods: {
    modifyDepart(row){ // row 代表要修改的部门
       this.title = '修改部门';
       this.drawer = true ;

       let code = row.code ;
       if (row.parentDepart !=null) {
          code = code.substring(row.parentDepart.code.length);
       }

       this.departRow = {
         parentId: row.parentDepart !=null ? row.parentDepart.id : null,
         parentName: row.parentDepart !=null ? row.parentDepart.name : '',
         parentCode: row.parentDepart !=null ? row.parentDepart.code : '',
         id : row.id ,
         name: row.name,
         code: code,
         status: row.status
       } ;

    },
    showData(){
       this.loading = true ;
       this.$api.queryDeparts(this.page, this.pageSize).then( ({data:ret})=> {
          if (ret.status === "10000") {
             // 将 接口中的数据 ，赋值给响应数数据
             this.data = ret.data.list ;
             this.total = ret.data.total ;
          }
          this.loading = false ;
       })
    },
    closeWin(flag){
       if (flag) this.showData();
       // 清空 departRow
       this.departRow = {} ;
       this.drawer = false ;
    },
    addDepart(row, title) {
       this.title = title ;
       this.departRow = {parentId: row.id, parentName: row.name, parentCode: row.code} ;
       this.drawer = true ;
    },
    remove(row) {
      this.$Modal.confirm({
        title: '提示',
        content: `您确定要删除该部门吗?`,
        onOk: () => {
          // 负责 调用接口、完成 菜单状态的修改
          this.$api.removeDepart(row.id).then(({data: ret}) => {
            if (ret.status === "10000") {
              this.$Message.success({background: true, content: "数据删除成功"});
              this.showData();
            } else {
              this.$Message.error({background: true, content: ret.message});
            }
          })
        }
      })
    },
  },
  components: {
    VanPagination,
    DepartForm,
    DotTag,
    UserTable
  }
}
</script>
